<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台布局</title>
  <link rel="stylesheet" href="../../2.css基础/source/reset.css">
</head>
<style>
  /* 利用固定布局包含块为视口的特点，将根元素设置为固定布局，宽高百分百
    就不会出现横向纵向滚动条
  */
  .app{
    position: fixed;
    width: 100%;
    height: 100%;
  }
  header{
    height: 60px;
    width: 100%;
    padding-left: 15px;
    background-color: #000;
    color: #fff;
    text-align: left;
    line-height: 60px;
    font-size: 20px;
    font-weight: 700;
    position: absolute;
  }
  .container{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-top: 60px;
  }
  .container .main{
    overflow: auto;
    height: 100%;
    background-color: #fff;
  }
  .container .left{
    overflow: auto;
    float: left;
    width: 300px;
    height: 100%;
    background-color: #ccc;
  }
</style>
<body>
  <div class="app">
      <header>
        <h1>标题-绝对定位，脱离常规文档流</h1>
      </header>
      <div class="container">
        <div class="left">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus nesciunt sequi doloribus velit totam quibusdam magni fugit saepe praesentium odio, expedita sapiente blanditiis dolorem laudantium impedit nihil accusantium harum quidem. Recusandae laborum aliquam dolor omnis dolore aliquid odit assumenda placeat odio, voluptatem cum eum. Vitae impedit voluptatem, magni nemo obcaecati dicta nostrum repellendus harum iusto fugiat. Omnis accusamus delectus ipsum nisi cumque autem perferendis deserunt vero unde, animi explicabo perspiciatis, magnam, numquam amet fuga dolore molestias nemo quibusdam adipisci ex. Iure praesentium mollitia eaque et ipsa non soluta fuga laborum labore modi ex beatae cupiditate perspiciatis aut tenetur error natus atque fugit provident repellendus ut ipsam quas, rerum nam. Esse quia tempora neque repudiandae commodi facilis nesciunt ex fugit minima ab totam consequuntur ullam, eaque soluta iure ratione incidunt cumque molestiae, quos aspernatur, dolorum quidem! Reiciendis nemo alias expedita modi ab mollitia similique reprehenderit id quas possimus, quidem distinctio excepturi laboriosam dolores dolorum nihil! Porro, dicta voluptates earum reiciendis sequi maxime obcaecati at placeat animi, veritatis, repudiandae ullam iusto temporibus ipsam veniam molestias laudantium aspernatur? Debitis, sint voluptatibus culpa voluptatem unde ad eius? Quod voluptates repudiandae commodi laboriosam quibusdam voluptate eum. Quasi aliquid laboriosam repudiandae inventore consequuntur, ea aut similique, doloribus fugiat accusamus aspernatur architecto vel non incidunt, autem nihil doloremque alias deleniti. Alias repellendus natus, odit itaque aut velit nemo est molestiae debitis fuga et dolore illo blanditiis tempora numquam nihil adipisci. Enim voluptate illum excepturi quibusdam quaerat. Aperiam ut nostrum, consequuntur magnam reprehenderit omnis molestias incidunt sint aliquam ipsam cum consectetur tenetur saepe numquam esse veritatis minima a nesciunt ratione, vel tempora quisquam eos? Necessitatibus ipsum consequatur praesentium at officia temporibus aliquam minus aliquid dolore, atque, tempora dicta iusto, culpa aut totam magni doloribus placeat suscipit quae repudiandae. Ipsum sit quae modi a rem voluptatum, voluptatibus veritatis, pariatur itaque distinctio eligendi, consectetur ipsam dolores. Officiis, perferendis. Aspernatur iste suscipit facere dignissimos nulla dolor, vel eaque distinctio magni illum soluta dicta sint illo impedit consequuntur nihil nemo rerum amet alias atque ex at nesciunt earum laborum! Quibusdam, commodi neque eos dolore mollitia iste eaque, quia voluptate suscipit perspiciatis, obcaecati expedita illo ea illum nostrum sequi. Quis totam officia excepturi rerum numquam in qui obcaecati aspernatur officiis accusantium magni, sint aperiam ipsa repellendus, quidem velit maxime recusandae praesentium reiciendis? Quia blanditiis, dolore aut deserunt, dignissimos consectetur recusandae molestiae distinctio unde voluptatibus labore quasi delectus quas tempore maiores nemo provident? Consequuntur repellat amet eligendi dolorum, in neque voluptate quia placeat. Repellendus tenetur numquam tempora alias velit ea iste necessitatibus. Veritatis voluptas facilis, fugiat ipsa eius soluta, aliquid quos illum beatae quasi accusantium, deleniti alias. Debitis odit accusamus similique adipisci amet nam necessitatibus cumque officiis qui perspiciatis voluptatem culpa consequuntur eveniet eligendi impedit ad voluptas, porro iure sunt illum, ratione eaque explicabo expedita! Doloremque amet eos minima necessitatibus ullam voluptas, odio beatae dolore eveniet id eligendi esse sint enim consequuntur cumque neque? Soluta, saepe nemo amet quos perferendis doloribus omnis autem quibusdam nisi consectetur nam id temporibus ea recusandae maiores pariatur enim at quam? Soluta ipsam cum ut tempora enim quam quis, accusantium facere itaque. Id ab maiores placeat et aliquid, facilis earum esse, temporibus possimus debitis quos dolorum. Quas debitis quaerat aliquam, neque odio a mollitia ipsa enim tenetur repudiandae officia officiis dolor. Excepturi nisi rem maxime, aperiam illum quos, distinctio eligendi similique ipsum repellendus sit sequi possimus commodi aut in error molestiae odio et tenetur temporibus vitae porro, atque fugit blanditiis! Excepturi nemo at ex voluptatum, aliquam officiis enim veritatis impedit eius possimus facere repudiandae voluptatibus dolorum cupiditate adipisci nobis maiores laudantium dolorem natus, molestias quam qui. Voluptate laboriosam obcaecati dicta perspiciatis! Ullam, placeat eveniet. Perspiciatis nam voluptatum optio sint distinctio veritatis ab voluptate soluta magnam deleniti voluptas, rem consequuntur corporis facere, animi quam nulla cum consectetur officiis atque! Iste repudiandae repellendus ea eos maxime architecto ipsam ab pariatur necessitatibus ut deleniti eligendi, tempore facilis earum, perferendis harum distinctio placeat magni ratione, error quibusdam sit? Delectus, necessitatibus nostrum maiores molestiae optio magni soluta magnam eveniet veritatis corrupti rem. Enim illo in similique ducimus aliquam possimus, perferendis vero? Libero incidunt provident eaque laborum ducimus deleniti distinctio nemo illum fuga? Voluptate dolores odio amet delectus esse illo perspiciatis quaerat itaque ex nemo eos temporibus quo necessitatibus fugit praesentium consectetur quis quos eveniet ratione perferendis, aliquid, assumenda deserunt officia accusantium. Hic, consequatur rerum velit porro architecto totam suscipit expedita quo obcaecati error enim omnis quaerat recusandae accusantium, quisquam deleniti eum commodi placeat amet. Itaque, temporibus hic. Esse porro distinctio dolorum ex culpa? Alias temporibus libero vero perferendis qui! Molestias voluptate, cumque doloremque soluta illum quo. Aspernatur, debitis soluta ea doloribus est, optio illo quos esse sed, vitae asperiores fugit consectetur. Amet laudantium sequi expedita repellat deleniti culpa quibusdam in iure libero! Vitae tempora aperiam nemo amet perferendis nulla enim deserunt commodi veniam reiciendis cum quibusdam repellendus iusto odit eos repellat assumenda, illo vel inventore velit suscipit qui voluptas animi maiores. Quam assumenda obcaecati nam deserunt id, corrupti libero non dignissimos optio dicta est, atque inventore! Fugiat rerum suscipit dolorum aliquid, consequuntur nam labore explicabo tempora totam perspiciatis perferendis vero doloribus facere eaque vitae tenetur velit eum amet quidem. Nulla nemo aperiam, distinctio maxime facilis aspernatur commodi soluta expedita aliquam, fugiat quis unde quod ducimus molestias, eos fugit veniam ipsum. In ipsam at possimus pariatur ut quibusdam alias molestias dolore quas ea laborum quos itaque reprehenderit nisi deserunt sequi voluptatem excepturi, voluptatibus blanditiis recusandae accusamus! Harum exercitationem ab praesentium maiores ipsum, similique minima delectus! Similique, ex ab ducimus eveniet magnam aut quaerat nam nemo at distinctio id odit, nostrum totam suscipit. Cupiditate assumenda temporibus, perferendis recusandae, vitae ipsa praesentium maiores consequuntur, voluptate illo quidem excepturi. Assumenda laboriosam aperiam explicabo autem consequuntur recusandae veniam? Quidem molestiae error accusantium iste dolor minima, tenetur quaerat, perspiciatis odio rem eaque. Voluptatibus deserunt, earum blanditiis nesciunt quas explicabo eum unde ex quia? Perferendis ea esse laborum labore molestiae impedit. Quod velit enim animi deleniti ut quaerat iste corporis excepturi quas? Quam repudiandae dicta, ratione excepturi minus doloremque laboriosam voluptatibus?
        </div>
        <div class="main">
          <p>主区域，宽高百分百。同时上内边距设置为标题高度，防止主区域内容被遮盖</p>
          <p>此时因为设置了内边距，总高度又超出了，需要设置Box-sizing</p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt consectetur adipisci itaque quam odio! Reprehenderit inventore illo culpa accusantium tenetur laboriosam animi eaque sed possimus, officiis eos ad in dolorum magnam? Deleniti inventore voluptas hic quibusdam, ut minima magnam ad sapiente qui, ducimus nostrum corporis ratione doloribus. Officia vitae quis necessitatibus excepturi quam veritatis in iure aliquid cumque eaque inventore, fugit quod illo eos, sapiente alias doloribus blanditiis commodi rerum reprehenderit. Saepe, temporibus! Eos aliquam incidunt necessitatibus quasi provident blanditiis vero, omnis ipsum? Ipsum modi est qui at atque. Laborum quibusdam alias cum soluta magnam accusantium numquam officia dicta, ullam pariatur officiis labore! Voluptatem modi necessitatibus voluptatibus at debitis, distinctio, quos unde ipsam harum culpa, dolore ducimus totam eius. Soluta ipsum optio expedita minima at dolorem omnis? Nulla quod ducimus aspernatur, quaerat praesentium delectus deserunt eos a perspiciatis nobis vero eaque facere optio provident nam animi? Velit sunt corrupti magni. Tempora, tenetur illum. Eius corporis corrupti voluptas doloribus consequuntur minima. Est asperiores, maiores eveniet minima necessitatibus consequatur beatae, totam eius dolorem quas unde facilis sapiente, aperiam dicta id iusto placeat nihil veritatis? Beatae necessitatibus quidem qui nisi, fugit placeat quam cupiditate officiis quae earum distinctio veniam atque, reprehenderit neque deserunt dolor obcaecati modi tempora cum voluptas eius. Minima explicabo incidunt accusantium tempore voluptatum delectus tempora provident nam, perferendis, harum nesciunt quia qui aperiam velit unde voluptas quae ipsum. Optio veniam ea repellendus esse vero mollitia qui. Eaque, culpa ratione. Ducimus, eos ullam. Aliquam omnis deleniti, asperiores praesentium voluptatum pariatur, totam veniam reprehenderit sed assumenda sapiente alias molestiae cumque beatae consectetur nam repellat tenetur a animi ut natus provident doloremque? Error, deleniti. Suscipit iusto unde culpa. Officia quas molestias, quae cum laborum corporis delectus quibusdam! At fuga cupiditate consequuntur distinctio adipisci omnis porro culpa officia tempora illum! Impedit, incidunt! Quis animi, hic nihil unde sunt dignissimos, quos praesentium sequi placeat error laudantium voluptates beatae? Delectus porro ab perferendis quo laborum earum, libero sunt dolore et atque aliquid facere, placeat, eaque necessitatibus? Repudiandae enim aliquam obcaecati harum quaerat, maiores hic expedita facilis accusantium eaque doloribus magni! Sit adipisci odio beatae soluta, necessitatibus ratione consectetur natus quam nihil pariatur culpa maxime repellat sint veritatis inventore provident ea ut reprehenderit consequuntur sapiente. Enim laborum dolore laudantium quam officia eum ullam accusantium cumque minus ducimus, culpa totam dolorem eius reiciendis quisquam laboriosam placeat deleniti numquam. Quidem eveniet minima, obcaecati aliquam rerum suscipit. Sunt natus architecto laborum similique aperiam placeat. Vitae laudantium alias illum sunt molestias aspernatur voluptatem assumenda possimus doloremque delectus debitis sapiente, voluptate natus provident culpa quia quae, necessitatibus magnam rem tempore consectetur. Dicta necessitatibus officiis minus optio nesciunt. Eos culpa cupiditate nam, exercitationem necessitatibus incidunt! Ullam laudantium ratione, sint ipsa dicta veritatis, voluptatibus vero vitae dignissimos aspernatur id! Excepturi ab odit expedita, ex possimus sint quia aperiam sapiente illo quasi, mollitia pariatur repellendus. Ipsa fuga fugiat ad earum cum corrupti aut molestiae. Possimus aspernatur dolores rerum tempora delectus corrupti, molestias blanditiis amet, architecto laudantium dolore quae ipsa, eius autem veniam ducimus. Aperiam quis maiores labore totam amet consectetur adipisci sit tempora, id ad ipsam dicta esse molestiae obcaecati repellat aut aliquam doloremque distinctio harum praesentium consequuntur unde hic facere? Atque numquam sequi maxime non perspiciatis quibusdam repudiandae nemo soluta consequatur cupiditate debitis similique ab neque sunt accusantium, voluptatum recusandae ipsum dolores quisquam obcaecati sint quis officiis magni. Molestiae blanditiis consectetur similique nisi dolor quibusdam doloremque laboriosam cumque necessitatibus sapiente officiis nesciunt atque ab suscipit veniam quia omnis dignissimos voluptates, tenetur voluptatem corrupti temporibus, placeat nihil eligendi. Ducimus aut at non corporis quidem impedit commodi natus facilis, rerum optio quae dignissimos consectetur saepe quasi alias mollitia culpa itaque ratione, dolor libero quis? Neque optio esse iure dolorem nesciunt animi incidunt sunt accusamus officiis! Inventore tempore sapiente blanditiis, ea nam earum aut minus delectus expedita beatae voluptatibus vero itaque dignissimos pariatur eius, praesentium impedit est hic excepturi in voluptatum possimus, magnam maxime ex! Amet dolorem dicta recusandae veniam cupiditate aliquid cumque facere hic laudantium nam impedit perferendis, maxime saepe commodi similique distinctio assumenda beatae! Dolorum tempore voluptatem, ex similique esse enim, ut, cum ipsa blanditiis quae libero voluptas? Molestias eum maxime, dolor numquam laborum adipisci iste quaerat quas enim exercitationem dolorum ducimus ut quis ad, officia dolores quo nesciunt suscipit eveniet. Tempore vel, quod deleniti corrupti facilis officiis numquam obcaecati explicabo quasi, voluptas voluptatem architecto, illum rerum. Quod dolorum neque vitae alias, totam consectetur ducimus illum, repudiandae blanditiis dicta recusandae, inventore odit ratione necessitatibus modi quaerat officiis optio molestiae ad porro ipsa aperiam voluptas sequi! Culpa, eligendi qui quaerat, quae eos architecto aut, voluptatibus numquam velit nam quibusdam similique illo corporis ratione minus vel ex error sunt optio! Quo, obcaecati. Dolor enim vitae, aspernatur laboriosam, alias facilis delectus fugiat dignissimos modi amet dicta dolores quam nulla aliquam soluta velit a, quos cumque quaerat reiciendis culpa. Delectus, eius? Doloremque ut vero corporis, sapiente minima repellendus nam ratione numquam officiis rem necessitatibus modi voluptatum eaque voluptatibus fugiat voluptas. Aliquid quisquam quis ab nisi officia maxime molestias eaque? Nobis eaque, perferendis ut possimus labore vero placeat culpa cum corrupti neque natus debitis odit illum mollitia tempora odio amet ipsa sapiente architecto, eveniet beatae. Eum id molestias provident esse quod. Nesciunt, aliquid veritatis consequuntur animi odio sed quis alias in! Minus ea dolorum corporis optio aperiam nulla. Vero excepturi inventore cumque nesciunt, numquam harum totam ipsa est repellendus sed hic fugit ex ipsam quaerat sunt tempore quibusdam, nisi mollitia maxime pariatur! Ducimus vitae perferendis quos expedita nisi quod iste aliquam provident minima, fugit totam. Nostrum saepe itaque quisquam assumenda rem enim velit corporis veritatis. Corrupti et distinctio nihil eveniet excepturi eius deserunt. Ex id perspiciatis repudiandae iste nisi quam. Libero molestias odit porro repellat in asperiores explicabo quisquam enim hic molestiae magnam ad numquam culpa, sequi quaerat doloribus perspiciatis nisi vitae reprehenderit aliquam ipsam consequatur, unde fugiat! Libero repellat officia quos reprehenderit nesciunt eum nobis iste incidunt velit expedita suscipit, obcaecati excepturi, itaque dolore voluptatem repudiandae cumque odio! Possimus fugiat doloremque magni quasi aspernatur itaque quidem voluptate dolorem enim!
        </div>
      </div>
  </div>
</body>
</html>